<template>
  <div class="dashboard">
    <div class="dashboard-content">
      <div class="recent-tasks">
        <el-table :data="joblist" style="width: 100%">
          <el-table-column prop="platform" label="平台" width="100">
            <template #default="scope">
              <el-tag :type="getPlatformTagApi(scope.row.account.type)" effect="plain">
                {{ getPlatformNameApi(scope.row.account.type) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="任务名称" width="200" />
          <el-table-column prop="account.name" label="账号" width="200" />
          <el-table-column prop="publish" label="计划执行时间" width="200" />
          <el-table-column prop="msg" label="错误信息" width="200" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusTagApi(getStatusTagApi(scope.row.status))" effect="plain">
                {{ getStatusNameApi(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" flex="1">
            <template #default="scope">
              <el-button size="small" type="info" @click="excluteJob(scope.row)" v-if="scope.row.status == '1'">
                执行
              </el-button>
              <el-button size="small" type="primary" @click="deleteJob(scope.row)"
                v-if="scope.row.status == '1' || scope.row.status == '8' || scope.row.status == '9'">
                删除
              </el-button>
              <el-button size="small" type="danger" @click="cancelJob(scope.row)" v-if="scope.row.status == '1'">
                取消
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="width: 100%;text-align: center; display: flex;">
          <el-pagination style="margin: 0 auto;" :page-size="joblimit" @change="handlePageChange"
            layout="prev, pager, next" :total="jobtotal" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { jobApi } from '@/api/job'

import { ElMessage, ElMessageBox } from 'element-plus'
import { getPlatformTag, getPlatformName, getStatusTag, getStatusName } from '@/utils/map'

const router = useRouter()

const joblist = ref([])
const jobtotal = ref(0)
const jobpage = ref(1)
const joblimit = ref(10)

const handlePageChange = (number) => {
  jobpage.value = number
  fetchJoblist()
}

const fetchJoblist = async () => {
  const { data } = await jobApi.list(jobpage.value, joblimit.value)
  joblist.value = data.list
  jobtotal.value = data.total
}
// 组件挂载时获取素材列表
onMounted(() => {
  fetchJoblist()
})

const getPlatformTagApi = (platform) => {
  return getPlatformTag(platform)
}
const getPlatformNameApi = (platform) => {
  return getPlatformName(platform)
}

const getStatusTagApi = (status) => {
  return getStatusTag(status)
}

const getStatusNameApi = (status) => {
  return getStatusName(status)
}
// 取消任务
const cancelJob = async (job) => {
  ElMessageBox.confirm(`确定要取消任务 ${job.title} 吗？`, '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }).then(async () => {
    // 更新任务状态
    const res = await jobApi.cancel(job.id)
    if (res.code === 200) {
      ElMessage({ type: 'success', message: '任务已取消', })
    }
    fetchJoblist()
  })
}

// 执行任务
const excluteJob = async (job) => {
  ElMessageBox.confirm(`确定要执行任务 ${job.title} 吗？`, '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }).then(async () => {
    // 更新任务状态
    const res = await jobApi.exclute(job.id)
    if (res.code === 200) {
      ElMessage({ type: 'success', message: '任务已执行', })
    }
    fetchJoblist()
  })
}
// 删除任务
const deleteJob = async (job) => {
  ElMessageBox.confirm(`确定要删除任务 ${job.title} 吗？`, '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }).then(async () => {
    // 更新任务状态
    const res = await jobApi.delete(job.id)
    if (res.code === 200) {
      ElMessage({ type: 'success', message: '任务已删除', })
    }
    fetchJoblist()
  })
}
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

.dashboard {
  .page-header {
    margin-bottom: 20px;

    h1 {
      font-size: 24px;
      color: $text-primary;
      margin: 0;
    }
  }

  .dashboard-content {
    .stat-card {
      height: 140px;
      margin-bottom: 20px;

      .stat-card-content {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background-color: rgba($primary-color, 0.1);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 15px;

          .el-icon {
            font-size: 30px;
            color: $primary-color;
          }

          &.platform-icon {
            background-color: rgba($success-color, 0.1);

            .el-icon {
              color: $success-color;
            }
          }

          &.task-icon {
            background-color: rgba($warning-color, 0.1);

            .el-icon {
              color: $warning-color;
            }
          }

          &.content-icon {
            background-color: rgba($info-color, 0.1);

            .el-icon {
              color: $info-color;
            }
          }
        }

        .stat-info {
          .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: $text-primary;
            line-height: 1.2;
          }

          .stat-label {
            font-size: 14px;
            color: $text-secondary;
          }
        }
      }

      .stat-footer {
        border-top: 1px solid $border-lighter;
        padding-top: 10px;

        .stat-detail {
          display: flex;
          justify-content: space-between;
          color: $text-secondary;
          font-size: 13px;

          .el-tag {
            margin-right: 5px;
          }
        }
      }
    }

    .quick-actions {
      margin: 20px 0 30px;

      h2 {
        font-size: 18px;
        margin-bottom: 15px;
        color: $text-primary;
      }

      .action-card {
        height: 160px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .action-icon {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: rgba($primary-color, 0.1);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 15px;

          .el-icon {
            font-size: 24px;
            color: $primary-color;
          }
        }

        .action-title {
          font-size: 16px;
          font-weight: bold;
          color: $text-primary;
          margin-bottom: 5px;
        }

        .action-desc {
          font-size: 13px;
          color: $text-secondary;
          text-align: center;
        }
      }
    }

    .recent-tasks {
      margin-top: 30px;

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

        h2 {
          font-size: 18px;
          color: $text-primary;
          margin: 0;
        }
      }
    }
  }
}
</style>